<!-- 统计分析 采购入库退货报表 -->
<template>
<view style="height: 100vh;">
 <layout index="/pages/scm/index/index" >
  <view class="carbon-container">
    <!-- 查询表单 -->
    <van-collapse :value="showSearch ? ['search'] : []">
      <van-collapse-item title="筛选条件" name="search">
        <van-form @submit="handleQuery">
          <van-field
            name="year"
            label="年份"
            label-width="4em"
          >
            <template #input>
              <van-datetime-picker
                v-model="queryParams.contractYear"
                type="year"
                title="选择年份"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="confirmYear"
                :formatter="formatter"
              />
            </template>
          </van-field>
          <van-field
            name="supplier"
            label="供应商"
            label-width="4em"
          >
            <template #input>
              <van-dropdown-menu active-color="#2a9d8f">
                <van-dropdown-item
                  v-model="queryParams.supplierId"
                  :options="supplierOptions"
                />
              </van-dropdown-menu>
            </template>
          </van-field>
          <van-field
            v-model="queryParams.materialName"
            label="物料名称"
            label-width="4em"
            placeholder="请输入物料名称"
            clearable
          />
          <view class="form-buttons">
            <van-button 
              round 
              type="primary" 
              color="#76c893"
              native-type="submit"
            >搜索</van-button>
            <van-button 
              round 
              plain 
              color="#76c893"
              @click="resetQuery"
            >重置</van-button>
          </view>
        </van-form>
      </van-collapse-item>
    </van-collapse>
    <!-- 统计切换 -->
    <van-tabs 
      v-model:active="activeTab"
      title-active-color="#2a9d8f"
      color="#a8dacc"
    >
      <van-tab title="季度统计">
        <scroll-view scroll-y class="table-scroll">
          <view class="carbon-table">
            <view class="table-header bg-primary">
              <text class="header-item">季度</text>
              <text class="header-item">物料名称</text>
              <text class="header-item">采购金额</text>
              <text class="header-item">退货金额</text>
            </view>
            <view 
              v-for="(item, index) in quarterData"
              :key="index"
              class="table-row"
              :class="index % 2 === 0 ? 'bg-even' : 'bg-odd'"
            >
              <text class="row-item">{{ item.quarter }}</text>
              <text class="row-item">{{ item.material }}</text>
              <text class="row-item">{{ item.purchaseAmount }}</text>
              <text class="row-item">{{ item.returnAmount }}</text>
            </view>
          </view>
        </scroll-view>
      </van-tab>
      <van-tab title="月份统计">
        <scroll-view scroll-y class="table-scroll">
          <view class="carbon-table">
            <view class="table-header bg-primary">
              <text class="header-item">月份</text>
              <text class="header-item">物料名称</text>
              <text class="header-item">采购数量</text>
              <text class="header-item">退货数量</text>
            </view>
            <view 
              v-for="(item, index) in monthData"
              :key="index"
              class="table-row"
              :class="index % 2 === 0 ? 'bg-even' : 'bg-odd'"
            >
              <text class="row-item">{{ item.month }}</text>
              <text class="row-item">{{ item.material }}</text>
              <text class="row-item">{{ item.purchaseNum }}</text>
              <text class="row-item">{{ item.returnNum }}</text>
            </view>
          </view>
        </scroll-view>
      </van-tab>
    </van-tabs>
  </view>
  </layout>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

// 查询参数
const queryParams = reactive({
  contractYear: new Date().getFullYear(),
  supplierId: '',
  materialName: ''
});

// 模拟供应商数据
const supplierOptions = ref([
  { text: '全部供应商', value: '' },
  { text: '绿色能源公司', value: 1 },
  { text: '环保材料集团', value: 2 },
  { text: '碳中和科技', value: 3 }
]);

// 模拟数据
const quarterData = ref([
  { quarter: '2023-Q1', material: '光伏板', purchaseAmount: '¥125,000', returnAmount: '¥2,400' },
  { quarter: '2023-Q2', material: '锂电池', purchaseAmount: '¥98,500', returnAmount: '¥1,200' },
]);

const monthData = ref([
  { month: '2023-01', material: '节能电机', purchaseNum: 150, returnNum: 5 },
  { month: '2023-02', material: '碳纤维', purchaseNum: 80, returnNum: 2 },
]);

// 时间选择范围
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2030, 11, 31);

// 时间格式化
const formatter = (type, val) => {
  if (type === 'year') return `${val}年`;
  return val;
};

// 搜索处理
const handleQuery = () => {
  console.log('执行查询:', queryParams);
};

// 重置查询
const resetQuery = () => {
  queryParams.contractYear = new Date().getFullYear();
  queryParams.supplierId = '';
  queryParams.materialName = '';
};
</script>

<style lang="scss">
.carbon-container {
  background-color: #f5fbf8; /* 直接写入颜色值 */
  min-height: 100vh;
  padding: 20rpx;

  // 表格样式
  .carbon-table {
    border-radius: 16rpx;
    overflow: hidden;
    margin: 20rpx;

    .table-header {
      display: flex;
      padding: 24rpx;
      background-color: #2a9d8f; /* 直接写入颜色值 */

      .header-item {
        flex: 1;
        color: #fff;
        font-size: 28rpx;
        text-align: center;
        font-weight: bold;
      }
    }

    .table-row {
      display: flex;
      padding: 24rpx;
      transition: background-color 0.3s;

      .row-item {
        flex: 1;
        text-align: center;
        font-size: 26rpx;
        color: #2a9d8f; /* 直接写入颜色值 */
      }
    }

    .bg-primary {
      background-color: #2a9d8f; /* 直接写入颜色值 */
    }

    .bg-even {
      background-color: #fff; /* 直接写入颜色值 */
    }

    .bg-odd {
      background-color: #f5fbf8; /* 直接写入颜色值 */
    }
  }

  // 表单样式
  .form-buttons {
    display: flex;
    justify-content: space-around;
    padding: 30rpx 0;

    .van-button {
      width: 200rpx;
    }
  }

  // 滚动容器
  .table-scroll {
    height: calc(100vh - 400rpx);
  }
}
</style>